<template>
  <div class="content-in">
    <div v-if="isNews" class="banner">
      <img src="@/assets/images/contact/news.png" />
      <div class="banner-tx">
        <p>{{ lang === 'en' ? 'NEWS CENTER' : '新闻中心' }}</p>
        <!-- <p>新闻中心</p> -->
        <template v-if="lang === 'en'">
          <p class="ft24">
            We deliver more information about the company to you, so that you can have a more
            comprehensive understanding of the company you care about
          </p>
        </template>
        <template v-else>
          <p class="ft24">我们为您传递更多的企业信息，使您更加全方位的了解您所关注的企业</p>
        </template>
      </div>
    </div>
    <render-component
      v-for="(item, index) in renderedComponents"
      v-bind="item"
      :key="index"
      navigator="pc"
    ></render-component>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import RenderComponent from '@/container/render-component/index.vue'

export default {
  components: {
    RenderComponent,
  },
  props: {
    renderedComponents: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['lang']),
    isNews() {
      return this.$route.query.type === '3'
    },
  },
  methods: {},
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  background: #f6f7f9;

  .banner {
    display: flex;
    position: relative;
    background: #fff;
    .pd(0, 0, 60, 0);

    img {
      width: 100%;
    }

    .banner-tx {
      width: 100%;
      .pd(200, 0, 0, 0);
      .ft(36);

      position: absolute;
      font-weight: bold;
      color: #fff;
      text-align: center;

      .ft48 {
        .ft(48);

        color: #949596;
      }

      .ft24 {
        .ft(20);
        .lineH(28);
        .width(640);

        margin: 10px auto;
        text-align: center;
      }
    }
  }
}
</style>
